import { Layout, Menu, Popconfirm } from 'antd'
import {
  HomeOutlined,
  DiffOutlined,
  EditOutlined,
  LogoutOutlined
} from '@ant-design/icons'
import { observer } from 'mobx-react-lite'
import {  Outlet, useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import './index.scss'
// import { useStore } from '../../store/Home'
const { Header, Sider } = Layout;
export default observer((props) => {
  const location = useLocation()
  const selectedKey = location.pathname
  const goto = useNavigate();

  useEffect(() => {
   props.homestore.updatehome()
    //拿数据
  }, [])
  // // 退出登录
  const onLogout = () => {
    localStorage.removeItem('token')
    goto('/login')
  }


  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <div className="user-info">
          <span className="user-name">
            {props.homestore.home.name}
          </span>
          <span className="user-logout">
            <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消" onConfirm={onLogout}>
              <LogoutOutlined /> 退出
            </Popconfirm>
          </span>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            theme="dark"
            style={{ height: '100%', borderRight: 0 }}
            selectedKeys={[selectedKey]}
              items={[
                {
                  key: '1',
                  icon: <HomeOutlined />,
                  label: `数据概览`,
                  key:"/home/data",
                  onClick: () => { goto('data') }
                },
                {
                  key: '2',
                  icon: <DiffOutlined />,
                  label: '内容管理',
                  key:"/home/content",
                  onClick: () => { goto('content') }
                },
                {
                  key: '3',
                  icon: <EditOutlined />,
                  label: '发布文章',
                  key:"/home/publish",
                  onClick: () => { goto('publish') }
                },
              ]}
          />
        </Sider>
        <Layout className="layout-content" style={{ padding: 20 }}>
          <Outlet />
        </Layout>
      </Layout>
    </Layout>
  )
})
